<template>
  <div>
    <TopFilter :list="topFilterList" :labelWidth="100" :rows="2" :cols="3" :collapse="false" @filterChange="searchSalesPart"></TopFilter>
    <!-- <FormPanel ref="formPanel" :list="topFilterList" :cols="3" :labelWidth="110" :isSubmitBtn="false" @formChange="searchSalesPart"></FormPanel> -->

    <!-- <div class="serach-button-style">
      <el-button size="small" type="primary" :loading="addBtnState" @click="queryClick">查 询</el-button>
      <el-button size="small" type="primary" :loading="addBtnState" @click="resetClick">重 置</el-button>
    </div> -->
    <FilterTable
      ref="table"
      columnsRef="partPartOtherPartObliTabsBrandModal"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      height="200"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="saveData"
      selectionType="single"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" :loading="addBtnState" @click="saveDialog">确定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { queryAllPartObligated, queryPartObligated } from '@/api/part/partOther/partObli';
import { getAllUser } from '@/api/customerRepair/afterSaleVisit/resultEntry';
export default {
  name: 'Brand',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    obligatedNo: {
      type: String,
      default: ''
    },
    ptype: {
      type: String
    }
  },
  data() {
    this.arr = [];
    return {
      arr: [],
      topFilterList: this.createTopFilterList(),
      fetchParams: { xhrAbort: true },
      visible: false,
      dialogTitle: '',
      addBtnState: null,
      fetchApi: queryAllPartObligated,
      columns: this.createTableColumns(),
      formData: {},
      codeName: []
    };
  },
  computed: {
    btnText() {
      return this.conf[this.type];
    }
  },
  mounted() {
    this.getCode();
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.searchAll();
  },
  methods: {
    saveData(row) {
      if (row.length > 0) {
        for (let i = 0; i < row.length; i++) {
          this.arr.push(row[i]);
        }
      }
    },
    closeDialog(param) {
      this.visible = false;
      this.$emit('close', false, param);
    },
    saveDialog() {
      if (this.arr.length > 0) {
        this.$emit('getData', false, this.arr);
        this.closeDialog('');
      } else {
        this.errorFunction();
      }
    },
    errorFunction() {
      this.$notify.error({
        title: '错误',
        message: '请选择数据'
      });
    },
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '配件预留单号',
          fieldName: 'obligatedNo'
        },
        {
          type: 'INPUT',
          label: '单据号',
          fieldName: 'roNo'
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName'
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 90,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '预留单号',
          dataIndex: 'obligatedNo',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '单据号码',
          dataIndex: 'sheetNo',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '申请人',
          dataIndex: 'applicant',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.getName(props.row.applicant)}</span>;
          }
        },
        {
          title: '申请时间',
          dataIndex: 'applyDate',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          width: 150,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          showOverflowTooltip: true
        },
        {
          title: '服务工程师',
          dataIndex: 'serviceAdvisor',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.getName(props.row.serviceAdvisor)}</span>;
          },
          showOverflowTooltip: true
        },
        {
          title: '送修人',
          dataIndex: 'deliverer',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '送修人手机',
          dataIndex: 'delivererMobile',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '送修人电话',
          dataIndex: 'delivererPhone',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车主',
          dataIndex: 'ownerName',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '备注',
          dataIndex: 'remark',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        }
      ];
    },
    async getCode() {
      let res = (await getAllUser()).data.map(x => ({ text: x.employeeName, value: x.userId }));
      this.codeName = res;
    },
    getName(userId) {
      const item = this.codeName.find(x => {
        return x.value == userId;
      });
      return item ? item.text : '';
    },
    // 查询
    queryClick() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    // 重置
    resetClick() {
      this.$refs.formPanel.RESET_FORM();
    },
    searchSalesPart(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false }, { ptype: this.ptype ? this.ptype : null });
    },
    // changeHandle(val) {
    //   this.fetchParams=Object.assign({}, val);
    // },
    // closeHandler(val, type) {
    //   this.visible = val;
    //   if (type === 'refresh') {
    //     // 重新加载
    //     this.fetchParams = { ...this.fetchParams };
    //   }
    // },
    searchAll() {
      // console.log(this.obligatedNo, 'obligatedNo');
      this.topFilterList.find(x => x.fieldName === 'obligatedNo').initialValue = this.obligatedNo;
      this.topFilterList = [...this.topFilterList];
      // console.log(this.topFilterList, 'topFilterList');
      this.$nextTick(() => {
        this.fetchParams = Object.assign({}, { obligatedNo: this.obligatedNo }, { xhrAbort: false }, { ptype: this.ptype ? this.ptype : null });
      });
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
